


<template>
  <div class="main">
    <div class="lme" v-show="meneStatus">
      <el-input class="elIp" clearable v-model="filterMenu" placeholder="请输入内容"></el-input>
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <el-menu-item v-for="(i,ii) in menuList" :key="ii" :index="i.distributorCode"
          @click="open(i)">
          <span slot="title">{{i.distributorName}}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="main-body">
      <top-bar @upRout="upRout" :distributorCode="distributorCode" :meneStatus="meneStatus"></top-bar>
      <Control />
    </div>
    <VolBox :lazy="true" :model.sync="model" title="添加小程序信息" :height="350" :width="500"
      :padding="15" :show="false" ref="mychid">
      <div>
        <VolForm ref="myform" :label-width="120" :loadKey="true" :formFields="editFormFields"
          :formRules="editFormOptions">
        </VolForm>
      </div>
      <div slot="footer">
        <Button type="default" @click="model = false">关闭</Button>
        <Button type="default" @click="onsure">确认</Button>
      </div>
    </VolBox>
  </div>

</template>
<script>
import NavBar from "@/components/NavBar";
import IconSelect from "@/components/IconSelect";
import TopBar from "@/components/TopBar";
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import MallPagesManage from "@/pages/MallPagesManage.vue";
import Control from "@/components/Control";
export default {
  name: "mall_store",
  components: {
    NavBar,
    IconSelect,
    TopBar,
    VolBox,
    VolForm,
    MallPagesManage,
    Control,
  },
  data() {
    return {
      model: false,
      ismodel: false,
      project: { config: { navigation: { list: [] } } },
      distributorCode: "",
      editFormFields: {
        logo: "",
        name: "",
        industry: "",
        pages: "",
        config: "",
        creator: "",
        createID: "",
        createDate: "",
        modifier: "",
        modifyID: "",
        modifyDate: "",
        supplierCode: "",
      },
      editFormOptions: [
        [
          {
            title: "Logo",
            field: "logo",
            type: "img",
            url: "/api/Stores/Upload",
            required: true,
          },
        ],
        [{ title: "小程序名称", field: "name", type: "text", required: true }],
        [
          {
            dataKey: "mallIndustry",
            data: [],
            title: "行业",
            field: "industry",
            type: "select",
            required: true,
          },
        ],
      ],
      menuList: [],
      filterMenu: "",
      upRoutSt: 1,
      meneStatus: true
    };
  },

  computed: {
    navigation() {
      return this.project.config.navigation;
    },
  },

  watch: {
    project: {
      handler(newval, oldval) {
        this.$store.getters.data().project = newval;
      },
      deep: true,
    },
    filterMenu(newval, oldval) {
      if (newval != "") {
        this.menuList = this.menuList2.filter((i, ii, iii) => {
          return i.distributorName.includes(newval);
        });
      } else {
        this.menuList = this.menuList2;
      }
    },
  },
  created() {
    this.getMenu();
    let reslut = this.$route.query.rows
    this.project = reslut;
          this.project.config = JSON.parse(reslut.config);
          this.project.pages = JSON.parse(reslut.pages);
  },
  methods: {
    getMenu() {
      let params = {
        page: 1,
        rows: 30,
        sort: "createDate",
        order: "desc",
        wheres:
          '[{"name":"distributorType","value":"2006,2004","displayType":"checkbox"}]',
      };
      this.http
        .post("api/DistributorNews/getPageData", params, false)
        .then((reslut) => {
          this.menuList = reslut.rows;
          this.menuList2 = reslut.rows;
        });
    },
    open(c) {
      this.upRoutSt = 1;
      this.distributorCode = c.distributorCode
      sessionStorage.setItem("distributorId",  c.distributorCode)
      let params = {
        page: 1,
        rows: 30,
        sort: "createDate",
        order: "desc",
        wheres:
          '[{"name":"supplierCode","value":"' +
          c.distributorCode +
          '","displayType":"Equal"}]',
      };

      this.http.post("api/Stores/getPageData", params, false).then((reslut) => {
        if (reslut.rows.length == 0) {
          this.model = true;
          this.$store.getters.data().project = null;
        } else {
          this.project = reslut.rows[0];
          this.project.config = JSON.parse(reslut.rows[0].config);
          this.project.pages = JSON.parse(reslut.rows[0].pages);
        }
      });
    },
    add() {
      this.navigation.list.push({
        id: this.$getRandomCode(5),
        icon: "ivu-icon-md-add",
        text: "",
        jump: {
          type: "",
          id: "",
        },
      });
    },
    onsure() {
      this.$refs.myform.validate(() => {
        this.editFormFields.supplierCode = this.distributorCode;
        let config = {
          navigation: {
            label: "导航",
            styles: {
              background: "#fff",
            },
            list: [
              {
                id: "00001",
                icon: "icon-shop",
                text: "首页",
                jump: {
                  type: "custom",
                  id: "000000",
                },
              },
              {
                id: "00003",
                icon: "icon-sort",
                text: "分类",
                jump: {
                  type: "fixed",
                  id: "category",
                },
              },
              {
                id: "00004",
                icon: "icon-cart",
                text: "购物车",
                jump: {
                  type: "fixed",
                  id: "car",
                },
              },
              {
                id: "00005",
                icon: "icon-my",
                text: "我的",
                jump: {
                  type: "fixed",
                  id: "my",
                },
              },
            ],
          },
          backgroundColor: "#FFFFFF",
        };
        let pages = [
          {
            id: "000000",
            name: "首页",
            home: true,
            backgroundUrl: [],
            backgroundColor: "",
            componentList: [
              {
                component: "McSwiper",
                name: "广告轮播",
                icon: "ivu-icon-md-swap",
                list: [
                  {
                    id: "0001",
                    image:
                      "https://oss.i-town.cn/itown/202311221058175012990.jpg",
                  },
                  {
                    id: "0002",
                    image:
                      "https://oss.i-town.cn/itown/202311221058336102360.jpg",
                  },
                  {
                    id: "0003",
                    image:
                      "https://oss.i-town.cn/itown/202311221058529104360.jpg",
                  },
                ],
                attrs: {
                  model: "basis",
                  autoplay: true,
                  loop: true,
                },
                styles: {
                  pagePadding: 0,
                  negativeMarginBottom: 0,
                },
                id: "1651050315JEeHVc",
              },
            ],
          },
        ];
        this.editFormFields.config = config;
        this.editFormFields.pages = pages;
        const params = JSON.parse(JSON.stringify(this.editFormFields));
        params.logo = params.logo.length ? params.logo[0].path : "";
        this.http
          .post("api/Stores/add", { mainData: params }, false)
          .then((reslut) => {});
        this.model = false;
      });
    },
    upRout(v) {
      this.upRoutSt = v;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("../../assets/style.css");
.edit {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 603px /*no*/;
  background: #f7f8fa;
}
.main {
  display: flex;
  height: 100%; /*no*/
  background: #f7f8fa;
  .lme {
    width: 180px;
    .elIp {
      width: 90%;
      margin: 10px 8px;
    }
  }
  .el-menu {
    height: calc(100% - 40px);
    overflow-y: auto;

    .el-menu-item {
      height: 31px;
      line-height: 32px;
    }
  }

  .main-body {
    flex: 1;

    .main-body-content {
      position: relative;
      height: calc(100% - 60px); /*no*/
      margin-top: 4px;
      overflow: hidden;
    }
  }
}
</style>
